<template>
  <div class="hero">
    <slot></slot>
    <h3 class="hero-banner font-effect-outline">DbClient</h3>
  </div>
</template>
<style>
@import url("https://fonts.googleapis.com/css?family=Tangerine&effect=outline");

.hero {
  margin: 0 auto;
  backface-visibility: hidden;
  max-width: 900px;
  animation: hero-animation 2.5s cubic-bezier(0.05, 0.35, 0.2, 1) forwards;
}

.hero-banner {
  margin: -10px auto 0 auto;
  max-width: 400px;
  text-align: right;
  padding-right: 60px;
  font-family: "Tangerine", serif;
}

@keyframes hero-animation {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
</style>
